<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>预警结果数据</el-breadcrumb-item>
                <el-breadcrumb-item>AI应用风险信息融合检测</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h3>AI应用风险信息融合检测</h3>
            <el-tabs v-model="activeName" type="card" style="margin-top: 20px;" @tab-click="tabsChange">
                <el-tab-pane label="搜索" name="搜索" />
                <el-tab-pane label="查看" name="查看" />
                <el-tab-pane label="情报服务" name="情报服务" />
            </el-tabs>

            <div class="main-content">
                <!-- 搜索 -->
                <div class="left" v-if="activeName == '搜索'">
                    <div style="color: #333;margin-bottom: 10px;">properties.name.keyword:</div>
                    <el-input type="textarea" :rows="15" placeholder="请输入内容" v-model="textarea"
                        resize="none"></el-input>
                    <el-button style="width: 100%;margin-top: 10px;" type="primary"
                        @click="queryGraphData">查询</el-button>
                </div>

                <!-- 查看table -->
                <div class="left" v-if="activeName == '查看'">
                    <div style="display: flex;align-items: center;margin-bottom: 10px;">
                        <div style="width: 70px;font-size: 14px;flex-shrink: 0;">图谱名称:</div>
                        <el-input size="mini" style="margin-right: 10px;"></el-input>
                        <el-button type="primary" size="mini" @click="getGraphList()">查询</el-button>
                        <el-button size="mini">重置</el-button>
                    </div>
                    <el-table :data="tableData" border>
                        <el-table-column prop="graphName" label="graphName"></el-table-column>
                        <el-table-column prop="spaceName" label="spaceName"></el-table-column>
                        <el-table-column label="操作" width="100" fixed="right">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleLook(scope.row)"
                                    style="margin-right: 10px;">查看</el-button>
                                <el-popconfirm title="确定要删除吗？" @confirm="handleDelete(scope.row)">
                                    <template #reference>
                                        <el-button type="text">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 图表 -->
                <div class="right" ref="mountNode" v-loading="loading" element-loading-text="加载中..."
                    v-if="activeName != '情报服务'" element-loading-background="rgba(0, 0, 0, 0.3)">
                    <graph :data="graphData" @getChildren="getChildren" ref="graphDom" type="AI_threat"
                        @getGraphList="getGraphList" />
                </div>

                <!-- 情报服务 -->
                <div v-if="activeName == '情报服务'" style="width:100%;overflow-y: auto;">
                    <Qingbao />
                </div>
            </div>
        </div>


    </div>
</template>

<script>
import graph from '@/components/graph/graph.vue'
import Qingbao from './qingbao.vue'
const colorMap = {
    'domain': 'red',
    'asset': 'yellow',
    'attack': 'blue',
    'dataset': 'green',
    'model': 'pink',
    'platform': '#222222',
}
export default {
    components: {
        graph,
        Qingbao
    },
    data() {
        return {
            textarea: "人脸识别",
            activeName: '搜索',
            graphData: {},
            loading: false,
            visible: false,
            tableData: [],
        };
    },
    mounted() {
        this.getGraphList()
    },
    methods: {
        // 查询图数据
        async queryGraphData() {
            this.loading = true
            this.$sendLog({
                operateFuncName: "AI应用风险信息融合检测",
                operateFuncKey: "AI Application Detection",
                operateInfo: "查询图谱",
                operateKey: "view",
            })
            const res = await this.$http.postJson('/api/sendNebulaGraph', {
                domain: this.textarea
            })

            // 处理数据
            await this.initData(res)

            this.loading = false
        },
        // 处理数据
        async initData(res) {
            console.log("节点原始数据", res)
            let nodes = []
            let edges = []
            nodes = res.nodes.map(item => {
                let nodeItem = item.properties
                return {
                    id: nodeItem.id,
                    label: `${nodeItem.ml_stage_of_attack || ''}\n${nodeItem.name}`,
                    children: item.children,
                    info: nodeItem,
                    style: {
                        fill: colorMap[nodeItem.label] || '#9EC9FF', //节点填充色
                    },
                }
            })
            edges = res.edges.map(item => {
                return {
                    source: item.source,
                    target: item.target,
                    label: item.label,
                    info: item,
                }
            })
            this.graphData = {
                nodes,
                edges
            }
            console.log("graphData", this.graphData)
        },
        // 下钻子节点
        async getChildren({ spaceName = 'AI_threat2', id, label, label1, isAll }) {
            this.loading = true
            let res
            if (isAll) {
                res = await this.$http.fetchGet('/api/deepAllChild', {
                    spaceName,
                    id,
                    label
                })
            } else {
                res = await this.$http.fetchGet('/api/deepOneTypeChild', {
                    spaceName,
                    id,
                    label,
                    label1: label1
                })
            }


            res.nodes = res.nodes.map(item => {
                let nodeItem = item.properties
                return {
                    ...nodeItem,
                    children: item.children,
                    info: nodeItem,
                    label: `${nodeItem.label || ''}\n${nodeItem.name}`,
                    style: {
                        fill: colorMap[nodeItem.label] || '#9EC9FF', //节点填充色
                    }
                }
            })
            res.edges = res.edges.map(item => {
                return {
                    source: item.source,
                    target: item.target,
                    label: item.properties.label,
                    info: item.properties
                }
            })
            console.log("res", res)
            this.mergeData(res)

            this.$nextTick(() => {
                this.loading = false
                console.log("this.loading", this.loading)
            })
        },
        // 合并数据
        mergeData({ edges, nodes }) {
            console.log("edges, nodes", edges, nodes)
            let graphData = this.graphData
            this.graphData = { nodes: [...graphData.nodes, ...nodes], edges: [...graphData.edges, ...edges] }
        },
        // 获取历史图谱
        async getGraphList() {
            const res = await this.$http.fetchGet('/api/findAllGraph', {
                spaceName: "AI_threat"
            })
            this.tableData = res
        },
        // 查看图谱
        handleLook(row) {
            this.graphData = row.graphInfo
        },
        // 删除图谱
        async handleDelete(row) {
            const res = await this.$http.fetchGet('/api/deleteGraph', {
                id: row.id
            })
            this.$message.success("删除成功")
            this.getGraphList()
        },
        tabsChange() {
            if (this.activeName == '情报服务') {
                // this.getQbList()
            }
        },

    }
};
</script>

<style scoped>
.main-content {
    display: flex;
    height: 70vh;
    box-sizing: border-box;
    overflow: hidden;

    .left {
        height: 100%;
        width: 25%;
    }

    .right {
        width: 75%;
        height: 100%;
        margin-left: 20px;
    }
}
</style>